<template>
    <pageTabelLayout>
        <template #pageHeader>
            <div class="my-tool-bar">
                <Toolbar :items="['保存', '删除', '打印', '提取工艺信息', '流转卡号', '配方单号']" @add="addHandler" @del="deleteHandler"
                    @select="selectHandler" @export="exports" @import="importHandler" @excel="downloadHandler">
                </Toolbar>
            </div>
        </template>
        <template #pageTabel>
            <div class="my-tool-bar" style="margin-right: 10px;margin-bottom: -40px;">
                <a-button size="mini" style=" margin:5px; " type="primary">中控未审核</a-button>
                <a-button size="mini" style="margin: 5px;" type="primary">称料</a-button>
                <a-button size="mini" style="margin: 5px; " type="primary">深色</a-button>
            </div>
            <a-tabs   :lazy-load="true" :justify="true" default-active-key="1" @change="handoff">
                <a-tab-pane title="缸卡信息" key="1">
                    <a-form ref="formRef" layout="horizontal" :model="dataForm" :label-col-props="{ span: 10 }"
                        :wrapper-col-props="{ span: 14 }">
                        <a-space>
                            <a-form-item label="配方单号" field="property" :rules="[{ required: true, message: '配方单号必填' }]">
                                <a-input class="bacClass" v-modle="dataForm.createName" :style="{ width: '300px' }" />
                            </a-form-item>
                            <a-form-item label="性质" field="property" :rules="[{ required: true, message: '性质必填' }]">
                                <a-select popup-container="html"  class="bacClass" :loading="loading" @search="handleSearch" @focus="focusSel"
                                    v-model="dataForm.property" :filter-option="false" allow-search allow-clear
                                    :style="{ width: '200px' }">
                                    <a-option v-for="item in pageData.xzList" :value="item">{{
                                        item
                                    }}</a-option>
                                </a-select>
                                <a-button type="primary" :style="{ width: '100px' }">已打印</a-button>
                            </a-form-item>
                            <a-form-item label="作业类型" field="jobType" :rules="[{ required: true, message: '作业类型必填' }]">
                                <a-select popup-container="html"  class="bacClass" :loading="loading1" @search="handleSearch1" @focus="focusSel1"
                                    v-model="dataForm.jobType" :filter-option="false" allow-search allow-clear
                                    :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.zyList" :value="item">{{
                                        item
                                    }}</a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="编制日期" field="property" :rules="[{ required: true, message: '编制日期必填' }]">
                                <a-date-picker  popup-container="html"  class="bacClass" v-model="dataForm.createName" :style="{ width: '300px' }" />
                            </a-form-item>
                            <a-form-item label="流转卡号" field="property" :rules="[{ required: true, message: '流转卡号必填' }]">
                                <a-select popup-container="html"  class="bacClass" v-model="dataForm.flowCardCode" @focus="focusSel2"
                                    @search="handleSearch2" @change="cardChange" :loading4="loading2" allow-clear
                                    :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.cardList" :value="item.id">
                                        {{ item.flowCardCode }}
                                    </a-option>
                                </a-select>
                            </a-form-item>
                        </a-space>
                        <a-space>
                            <a-form-item label="客户名称" field="property" :rules="[{ required: true, message: '客户名称必填' }]">
                                <a-select popup-container="html"  class="bacClass" v-model="dataForm.customName" @focus="ccFocus" @click="ccClick"
                                    allow-clear :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ccList" :value="item.customName">
                                        {{ item.customName }}
                                    </a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="色号" field="property" :rules="[{ required: true, message: '色号必填' }]">
                                <a-select popup-container="html"  class="bacClass" v-model="dataForm.colorCode" @focus="ccFocus" @click="ccClick"
                                    allow-clear :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ccList" :value="item.colorCode">
                                        {{ item.colorCode }}
                                    </a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="色称" field="property" :rules="[{ required: true, message: '色称必填' }]">
                                <a-select popup-container="html"  class="bacClass" v-model="dataForm.colorName" @focus="ccFocus" @click="ccClick"
                                    allow-clear :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ccList" :value="item.colorName">
                                        {{ item.colorName }}
                                    </a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="确认色" field="property" :rules="[{ required: true, message: '确认色必填' }]">
                                <a-select popup-container="html"  class="bacClass" v-model="dataForm.customName" @focus="ccFocus" @click="ccClick"
                                    allow-clear :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ccList" :value="item.customName">
                                        {{ item.customName }}
                                    </a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="匹数" field="property" :rules="[{ required: true, message: '匹数必填' }]">
                                <a-select popup-container="html"  class="bacClass" v-model="dataForm.houseNum" @focus="ccFocus" @click="ccClick"
                                    allow-clear :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ccList" :value="item.houseNum">
                                        {{ item.houseNum }}
                                    </a-option>
                                </a-select>
                            </a-form-item>
                        </a-space>
                        <a-space>
                            <a-form-item label="总重量" field="property" :rules="[{ required: true, message: '总重量必填' }]">
                                <a-select popup-container="html"  class="bacClass" v-model="dataForm.customName" @focus="ccFocus" @click="ccClick"
                                    allow-clear :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ccList" :value="item.customName">
                                        {{ item.customName }}
                                    </a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="类型" field="property" :rules="[{ required: true, message: '类型必填' }]">
                                <a-select popup-container="html"  class="bacClass" v-model="dataForm.colorName" @focus="ccFocus" @click="ccClick"
                                    allow-clear :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ccList" :value="item.colorName">
                                        {{ item.colorName }}
                                    </a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="机台号" field="property" :rules="[{ required: true, message: '机台号必填' }]">
                                <a-select popup-container="html"  class="bacClass" v-model="dataForm.customName" @focus="ccFocus" @click="ccClick"
                                    allow-clear :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ccList" :value="item.customName">
                                        {{ item.customName }}
                                    </a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="布号" field="property" :rules="[{ required: true, message: '布号必填' }]">
                                <a-select popup-container="html"  class="bacClass" v-model="dataForm.houseNum" @focus="ccFocus" @click="ccClick"
                                    allow-clear :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ccList" :value="item.houseNum">
                                        {{ item.houseNum }}
                                    </a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="品名" field="property" :rules="[{ required: true, message: '品名必填' }]">
                                <a-select popup-container="html"  class="bacClass" v-model="dataForm.customName" @focus="ccFocus" @click="ccClick"
                                    allow-clear :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ccList" :value="item.customName">
                                        {{ item.customName }}
                                    </a-option>
                                </a-select>
                            </a-form-item>
                        </a-space>
                        <a-space>
                            <a-form-item label="计划单号" field="property" :rules="[{ required: true, message: '计划单号必填' }]">
                                <a-select popup-container="html"  class="bacClass" v-model="dataForm.colorName" @focus="ccFocus" @click="ccClick"
                                    allow-clear :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ccList" :value="item.colorName">
                                        {{ item.colorName }}
                                    </a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="纱批" field="property" :rules="[{ required: true, message: '纱批必填' }]">
                                <a-select popup-container="html"  class="bacClass" v-model="dataForm.customName" @focus="ccFocus" @click="ccClick"
                                    allow-clear :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ccList" :value="item.customName">
                                        {{ item.customName }}
                                    </a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="对色师傅" field="empName" :rules="[{ required: true, message: '对色师傅必填' }]">
                                <a-select popup-container="html"  class="bacClass" :loading="loading3" @search="handleSearch3" @focus="focusSel3"
                                    v-model="dataForm.empName" :filter-option="false" allow-search allow-clear
                                    :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ygList" :value="item.empName">{{
                                        item.empName
                                    }}</a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="浴比" field="property" :rules="[{ required: true, message: '浴比必填' }]">
                                <a-select popup-container="html"  class="bacClass" v-model="dataForm.customName" @focus="ccFocus" @click="ccClick"
                                    allow-clear :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ccList" :value="item.customName">
                                        {{ item.customName }}
                                    </a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="资料员" field="empName" :rules="[{ required: true, message: '资料员必填' }]">
                                <a-select popup-container="html"  class="bacClass" :loading="loading3" allow-clear @search="handleSearch3"
                                    @focus="focusSel3" v-model="dataForm.empName2" :style="{ width: '300px' }">
                                    <a-option v-for="item in pageData.ygList" :value="item.empName">{{
                                        item.empName
                                    }}</a-option>
                                </a-select>
                            </a-form-item>
                        </a-space>
                        <a-tabs   :lazy-load="true" style="margin-top:-20px;">
                            <a-tab-pane title="拼缸信息">
                                <a-space style="margin-top:-20px;">
                                    <a-button size="mini" :style="{ margin: '3px' }" type="primary">导入中转站</a-button>
                                    <a-button size="mini" :style="{ margin: '3px' }" type="primary">计算浴比</a-button>
                                </a-space>
                            </a-tab-pane>
                        </a-tabs>
                    </a-form>
                      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressDragLeaveHidesColumns="true"
                    :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady2"
                        style="height:31%;width: 40%;margin: 0 auto;float: right;" :defaultColDef="defaultColDef"
                        class='ag-theme-alpine' :rowData="table.dataList" :columnDefs="tc2"></AgGridVuesCopys>
                      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressDragLeaveHidesColumns="true"
                    :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height:31%;width: 59%;"
                        :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="table.dataList" :columnDefs="tc">
                    </AgGridVuesCopys>
                      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressDragLeaveHidesColumns="true"
                    :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady3" style="height:31%;margin-top: 10px;"
                        :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="table.dataList" :columnDefs="tc3">
                    </AgGridVuesCopys>
                </a-tab-pane>
                <a-tab-pane title="其他信息" key="2">
                    <a-form ref="formRef" layout="horizontal" size="small" :model="dataForm" :label-col-props="{ span: 7 }"
                        :wrapper-col-props="{ span: 17 }">
                        <a-row :gutter="16">
                            <a-col :span="6">
                                <a-form-item label="复样员" field="property" :rules="[{ required: true, message: '配方单号必填' }]">
                                    <a-input placeholder="请输入配方单号" class="bacClass" v-modle="dataForm.createName" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="机速" field="property" :rules="[{ required: true, message: '性质必填' }]">
                                    <a-select popup-container="html"  placeholder="请输入性质" class="bacClass" :loading="loading" @search="handleSearch"
                                        @focus="focusSel" v-model="dataForm.property" :filter-option="false" allow-search
                                        allow-clear>
                                        <a-option v-for="item in pageData.xzList" :value="item">{{
                                            item
                                        }}</a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="风机" field="jobType" :rules="[{ required: true, message: '作业类型必填' }]">
                                    <a-select popup-container="html"  placeholder="请输入作业类型" class="bacClass" :loading="loading1"
                                        @search="handleSearch1" @focus="focusSel1" v-model="dataForm.jobType"
                                        :filter-option="false" allow-search allow-clear>
                                        <a-option v-for="item in pageData.zyList" :value="item">{{
                                            item
                                        }}</a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="喷嘴" field="property" :rules="[{ required: true, message: '编制日期必填' }]">
                                    <a-date-picker  popup-container="html"  placeholder="请输入编制日期" class="bacClass" v-model="dataForm.createName" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="6">
                                <a-form-item label="主泵" field="property" :rules="[{ required: true, message: '流转卡号必填' }]">
                                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.flowCardCode" @focus="focusSel2"
                                        placeholder="请输入流转卡号" @search="handleSearch2" @change="cardChange"
                                        :loading4="loading2" allow-clear>
                                        <a-option v-for="item in pageData.cardList" :value="item.id">
                                            {{ item.flowCardCode }}
                                        </a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="涤重量" field="property" :rules="[{ required: true, message: '客户名称必填' }]">
                                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.customName" @focus="ccFocus"
                                        @click="ccClick" allow-clear placeholder="请输入客户名称">
                                        <a-option v-for="item in pageData.ccList" :value="item.customName">
                                            {{ item.customName }}
                                        </a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="门幅" field="property" :rules="[{ required: true, message: '色号必填' }]">
                                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.colorCode" @focus="ccFocus"
                                        @click="ccClick" allow-clear placeholder="请输入色号">
                                        <a-option v-for="item in pageData.ccList" :value="item.colorCode">
                                            {{ item.colorCode }}
                                        </a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="颜色深浅" field="property" :rules="[{ required: true, message: '色称必填' }]">
                                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.colorName" @focus="ccFocus"
                                        @click="ccClick" allow-clear placeholder="请输入色称">
                                        <a-option v-for="item in pageData.ccList" :value="item.colorName">
                                            {{ item.colorName }}
                                        </a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="6">
                                <a-form-item label="布长" field="property" :rules="[{ required: true, message: '机台号必填' }]">
                                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.customName" @focus="ccFocus"
                                        @click="ccClick" allow-clear placeholder="请输入机台号">
                                        <a-option v-for="item in pageData.ccList" :value="item.customName">
                                            {{ item.customName }}
                                        </a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="步骤个数" field="property" :rules="[{ required: true, message: '布号必填' }]">
                                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.houseNum" @focus="ccFocus" @click="ccClick"
                                        allow-clear placeholder="请输入布号">
                                        <a-option v-for="item in pageData.ccList" :value="item.houseNum">
                                            {{ item.houseNum }}
                                        </a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="副缸扣水" field="property" :rules="[{ required: true, message: '品名必填' }]">
                                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.customName" @focus="ccFocus"
                                        @click="ccClick" allow-clear placeholder="请输入品名">
                                        <a-option v-for="item in pageData.ccList" :value="item.customName">
                                            {{ item.customName }}
                                        </a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="工艺时间" field="property" :rules="[{ required: true, message: '计划单号必填' }]">
                                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.colorName" @focus="ccFocus"
                                        @click="ccClick" allow-clear placeholder="请输入计划单号">
                                        <a-option v-for="item in pageData.ccList" :value="item.colorName">
                                            {{ item.colorName }}
                                        </a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="6">
                                <a-form-item label="染色吸水率" field="property" :rules="[{ required: true, message: '纱批必填' }]">
                                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.customName" @focus="ccFocus"
                                        @click="ccClick" allow-clear placeholder="请输入纱批">
                                        <a-option v-for="item in pageData.ccList" :value="item.customName">
                                            {{ item.customName }}
                                        </a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="其他吸水率" field="empName" :rules="[{ required: true, message: '对色师傅必填' }]">
                                    <a-select popup-container="html"  class="bacClass" placeholder="请输入对色师傅" :loading="loading3"
                                        @search="handleSearch3" @focus="focusSel3" v-model="dataForm.empName"
                                        :filter-option="false" allow-search allow-clear>
                                        <a-option v-for="item in pageData.ygList" :value="item.empName">{{
                                            item.empName
                                        }}</a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="行布" field="property" :rules="[{ required: true, message: '浴比必填' }]">
                                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.customName" @focus="ccFocus"
                                        @click="ccClick" allow-clear placeholder="请输入浴比">
                                        <a-option v-for="item in pageData.ccList" :value="item.customName">
                                            {{ item.customName }}
                                        </a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="拼缸缸卡" field="empName" :rules="[{ required: true, message: '资料员必填' }]">
                                    <a-select popup-container="html"  class="bacClass" placeholder="请输入资料员" :loading="loading3" allow-clear
                                        @search="handleSearch3" @focus="focusSel3" v-model="dataForm.empName2">
                                        <a-option v-for="item in pageData.ygList" :value="item.empName">{{
                                            item.empName
                                        }}</a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-form-item label-col-flex="80px" label="备注">
                            <a-textarea class="bacClass" style="height:70px" placeholder="" v-model="dataForm.remark"
                                auto-size="true" :max-length="400" allow-clear show-word-limit />
                        </a-form-item>
                    </a-form>
                </a-tab-pane>
            </a-tabs>
        </template>
        <!-- <paginationCopys :total="total" show-total show-jumper show-page-size @change="PageSize"
            @page-size-change="change1" style="justify-content: center" />

        <a-drawer ok-text='保存' cancel-text='关闭' :drawer-style="{ 'zIndex': 999 }" :mask-closable="false" :width="400"
            popup-container=".arco-tabs-content" :height="pageData.rHeight" :visible="pageData.showAdd"
            :ok-loading="pageData.pageLoading" placement="bottom" unmountOnClose @ok="sideOk"
            @cancel="pageData.showAdd = false">
            <template #title>
                {{ pageData.sideTitle }}

                
            </template>
        </a-drawer> -->
        <a-space style="margin-right: 10px;margin-bottom: -40px;">
            <a-button @click="noClick">取消</a-button>
            <!-- <a-button html-type="submit" type="outline">确认</a-button> -->
            <a-button html-type="submit" type="primary">保存</a-button>
        </a-space>


        <a-modal :visible="visible" ok-text="打印" @ok="print" :width="800" @cancel="canNo">
            <template #title> 物料申购单 </template>
            <div id="request">
                <table class="isTable">
                    <tr>
                        <th>产品编号</th>
                        <th>产品名称</th>
                        <th>规格</th>
                        <th>数量</th>
                        <th>单位</th>
                        <th>备注</th>
                    </tr>
                    <tr>
                        <th colspan="3" style="letter-spacing: 50px">合计</th>
                        <th colspan="3">{{ total }}</th>
                    </tr>
                </table>
            </div>
        </a-modal>
    </pageTabelLayout>
</template>

<script lang="ts">
import { post } from '@/api/http'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table';
import emitter from "@/hooks/useEventBus";
import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue';
import { Form, Message, Modal } from '@arco-design/web-vue';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { baseURL } from '../../../../api/axios.config'
import axios from "axios";
import filedownload from 'js-file-download'
import usePermission from '@/store/modules/permission'
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { AnyARecord } from 'dns';
import printJS from 'print-js'

import { right } from '@popperjs/core';

interface BrandInfo {
    "id": any,
    "remark": string | undefined,
    "createName": string | undefined,
    "createTime": string | undefined,
    "updateName": string | undefined,
    "updateTime": string | undefined,
    "deleteState": any,
    "obsoleteState": any,
    "serial": any,
    "programType": any,
    "daysProofing": any,
    "property": any,
    "jobType": any,
    "flowCardCode": any,
    "colorCode": any,
    "customName": any,
    "colorName": any,
    "houseNum": any,
    "empName": any,
    "empName2": any,
}

export default {
    name: "RecipeMaking2022",
    setup() {
        const handoff = (key: any) => {
            id.value = key;
            if (id.value == 1) {
                table.handleSuccess(tableList1)
            } else {
                table.handleSuccess(tableList2)
            }
        }
        let tableList1 = ref([]);
        let tableList2 = ref([]);
        let id = ref(1);
        const total = ref(10);
        const page = ref(1);
        const size = ref(10);
        function PageSize(val: any) {
            if (val == 1) {
                pagination.page = val
                doRefresh();
            } else {
                pagination.page = val
                doRefresh2();
            }
        }

        function change1(val: any) {
            if (val == 1) {
                pagination.pageSize = val
                doRefresh();
            } else {
                pagination.pageSize = val
                doRefresh2();
            }
        }
        const headerShow = ref<boolean>(true)
        //查询方法
        function doRefresh() {
            // pageData.pageLoading = true
            // post({
            //     url: "/pdm/ProgramType/selectPage",
            //     data: {
            //         page: pagination.page,
            //         size: pagination.pageSize,
            //         deleteState: "0",
            //     },
            // })
            //     .then(({ data, code }: any) => {
            //         if (code === 200) {
            //             table.handleSuccess(data.list);
            //             gridOption.value.setRowData(data.list);
            //             total.value = data.total;
            //         }
            //     })
            //     .catch(console.log).finally(() => {
            //         pageData.pageLoading = false
            //     })
        }
        function doRefresh2() {

            pageData.pageLoading = true
            post({
                url: "/pdm/ProgramType/selectPage",
                data: {
                    page: pagination.page,
                    size: pagination.pageSize,
                    deleteState: "0",
                },
            })
                .then(({ data, code }: any) => {
                    if (code === 200) {
                        table.handleSuccess(data.list);
                        gridOption.value.setRowData(data.list);
                        total.value = data.total;
                    }
                })
                .catch(console.log).finally(() => {
                    pageData.pageLoading = false
                })
        }
        const { selectedRowKeys, onSelectionChange } = useRowSelection();
        const pagination = usePagination(doRefresh);
        const table = useTable();
        const rowKey = useRowKey("id");
        const tableColumns1 = useTableColumn([
            {
                title: "项目",
                key: "id",
                dataIndex: "id",
                slotName: "id",
                width: 150,
                fixed: 'left',
            },
            {
                title: "工艺1",
                key: "craftOne",
                dataIndex: "craftOne",
                width: 150
            },
            {
                title: "工艺2",
                key: "craftTwo",
                dataIndex: "craftTwo",
                width: 150
            },
            {
                title: "工艺3",
                key: "craftThree",
                dataIndex: "craftThree",
                width: 150
            },
            {
                title: "工艺4",
                key: "craftFour",
                dataIndex: "craftFour",
                width: 150
            },
            {
                title: "工艺5",
                key: "craftFive",
                dataIndex: "craftFive",
                width: 200
            },
            {
                title: "工艺6",
                key: "craftSix",
                dataIndex: "craftSix",
                width: 150
            },
            {
                title: "工艺7",
                key: "craftSeven",
                dataIndex: "craftSeven",
                width: 200
            },
            {
                title: "工艺8",
                key: "craftEight",
                dataIndex: "craftEight",
                width: 200
            },
        ]);
        const tableColumns2 = useTableColumn([
            {
                title: "流转卡号",
                key: "flowCardCode",
                dataIndex: "flowCardCode",
                width: 150,
            },
            {
                title: "匹数",
                key: "loneNumber",
                dataIndex: "loneNumber",
                width: 150
            },
            {
                title: "重量",
                key: "byPieceGramWeight",
                dataIndex: "byPieceGramWeight",
                width: 150
            },
            {
                title: "品名",
                key: "gradeName",
                dataIndex: "gradeName",
                width: 150
            }
        ]);
        const tableColumns3 = useTableColumn([
            {
                title: "工序名称",
                key: "processName",
                dataIndex: "processName",
                width: 150,
            },
            {
                title: "程序号",
                key: "programNumber",
                dataIndex: "programNumber",
                width: 150
            },
            {
                title: "程序名称",
                key: "programName",
                dataIndex: "programName",
                width: 150
            },
            {
                title: "步骤号",
                key: "processCode",
                dataIndex: "processCode",
                width: 150
            },
            {
                title: "染化料编号",
                key: "materialCode",
                dataIndex: "materialCode",
                width: 150
            },
            {
                title: "染化料名称",
                key: "materialName",
                dataIndex: "materialName",
                width: 150
            },
            {
                title: "类别",
                key: "category",
                dataIndex: "category",
                width: 150
            },
            {
                title: "调整比例%",
                key: "percentage",
                dataIndex: "percentage",
                width: 150
            },
            {
                title: "浴比",
                key: "bathRatioOne",
                dataIndex: "bathRatioOne",
                width: 150
            },
            {
                title: "水重",
                key: "waterYield",
                dataIndex: "waterYield",
                width: 150
            },
            {
                title: "总浓度",
                key: "alwaysConcentration",
                dataIndex: "alwaysConcentration",
                width: 150
            },
            {
                title: "用料比例",
                key: "proportion",
                dataIndex: "proportion",
                width: 150
            },
            {
                title: "浓度",
                key: "concentration",
                dataIndex: "concentration",
                width: 150
            },
            {
                title: "浓度单位",
                key: "conUnits",
                dataIndex: "conUnits",
                width: 150
            },
            {
                title: "用料",
                key: "ingredient",
                dataIndex: "ingredient",
                width: 150
            },
            {
                title: "单位",
                key: "ingUnits",
                dataIndex: "ingUnits",
                width: 150
            },
            {
                title: "操作步骤",
                key: "handleProcess",
                dataIndex: "handleProcess",
                width: 150
            },
            {
                title: "自动手动",
                key: "manuAuto",
                dataIndex: "manuAuto",
                width: 150
            },
            {
                title: "副缸扣减量",
                key: "abatement",
                dataIndex: "abatement",
                width: 150
            },
            {
                title: "盐扣减水量",
                key: "abatementWater",
                dataIndex: "abatementWater",
                width: 150
            },
            {
                title: "浓度最大限制G/L",
                key: "maxConcentration",
                dataIndex: "maxConcentration",
                width: 150
            },
            {
                title: "染料批号",
                key: "batchNumber",
                dataIndex: "batchNumber",
                width: 150
            },
            {
                title: "调整系数",
                key: "adjust",
                dataIndex: "adjust",
                width: 150
            },
            {
                title: "工艺步骤",
                key: "remark",
                dataIndex: "remark",
                width: 150
            },
            {
                title: "顺序号",
                key: "remark",
                dataIndex: "remark",
                width: 150
            },
            {
                title: "原料类型",
                key: "materialType",
                dataIndex: "materialType",
                width: 150
            },
            {
                title: "化料桶号",
                key: "pailCode",
                dataIndex: "pailCode",
                width: 150
            },
            {
                title: "化料程序",
                key: "remark",
                dataIndex: "remark",
                width: 150
            },
            {
                title: "温度",
                key: "remark",
                dataIndex: "remark",
                width: 150
            },
            {
                title: "时间",
                key: "remark",
                dataIndex: "remark",
                width: 150
            },
            {
                title: "类型",
                key: "remark",
                dataIndex: "remark",
                width: 150
            },
            {
                title: "PH值确认",
                key: "remark",
                dataIndex: "remark",
                width: 150
            },
            {
                title: "浴比",
                key: "bathRatioTwo",
                dataIndex: "bathRatioTwo",
                width: 150
            },
            {
                title: "输送方式",
                key: "convey",
                dataIndex: "convey",
                width: 150
            }
        ]);
        let tc: any[] = tableColumns1.map((o) => {
            let obj = {
                headerName: o.title,
                field: o.key,
                pinned: o['fixed']
            }
            if (o.slotName === 'id') {
                obj['resizable'] = false
                obj['filter'] = false
                obj['sortable'] = false
                obj["lockPosition"] = "id"
                obj['cellRenderer'] = {
                    template: ``,
                    setup(props: any) {
                        return {

                        }
                    }
                }
            }
            return obj
        })
        let tc2: any[] = tableColumns2.map((o) => {
            let obj = {
                headerName: o.title,
                field: o.key,
                pinned: o['fixed']
            }
            return obj
        })
        let tc3: any[] = tableColumns3.map((o) => {
            let obj = {
                headerName: o.title,
                field: o.key,
                pinned: o['fixed']
            }
            return obj
        })
        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        tc = a.concat(tc)
        tc2 = a.concat(tc2)
        tc3 = a.concat(tc3)
        const pageData = reactive<{
            showAdd: boolean,
            sideTitle: string,
            dropDownData: any,
            nameList: [],
            pageLoading: boolean,
            typeList: [],
            dropDownData1: any,
            rHeight: any,
            btnList: any[],
            isEdit: boolean,
            xzList: any[],
            zyList: any[],
            cardList: any[],
            ccList: any[],
            ygList: any[],
            keysNum: any,
            property: any,
            pfList: any[],
            flowCardCode: any,
        }>({
            nameList: [],
            showAdd: false,
            sideTitle: '新增程序类型',
            dropDownData: "",
            pageLoading: false,
            typeList: [],
            dropDownData1: "",
            rHeight: 0,
            btnList: [],
            isEdit: false,
            xzList: [],
            zyList: [],
            cardList: [],
            ccList: [],
            ygList: [],
            keysNum: 1,
            property: "",
            pfList: [],
            flowCardCode: "",
        });

        interface gcType {
            id: any,
            company: any,
        }
        onMounted(() => {
            // 切换tap到本页面执行的方法
            emitter.on("RecipeMaking2022", () => {
                if (id.value == 1) {
                    doRefresh();
                } else if (id.value == 2) {
                    doRefresh2();
                }
            })
        });

        let cxbl = {}
        //查询
        const selectHandler = () => {
            if (id.value == 1) {
                pagination.page = 1
                doRefresh();
            } else {
                pagination.page = 1
                doRefresh2();
            }
        }
        const queryData = reactive({
            programType: ""
        });
        const addHandler = () => {
            for (var key in dataForm) {
                if (key === "id") {
                    dataForm[key] = null;
                } else {
                    dataForm[key] = "";
                }
            }
            pageData.keysNum = 1;
            pageData.showAdd = true
            pageData.sideTitle = '新增程序类型'
        }
        const dataForm = reactive<BrandInfo>({
            "id": null,
            "remark": "",
            "createName": "",
            "createTime": "",
            "updateName": "",
            "updateTime": "",
            "deleteState": 0,
            "obsoleteState": "",
            "serial": 0,
            "programType": null,
            "daysProofing": "",
            "property": "",
            "jobType": "",
            "flowCardCode": "",
            "colorCode": "",
            "customName": "",
            "colorName": "",
            "houseNum": "",
            "empName": "",
            "empName2": "",
        })

        // 表格准备事件
        const gridOption = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api
        }
        const gridOption2 = ref()
        const gridReady2 = (params: any) => {
            gridOption2.value = params.api
        }
        const gridOption3 = ref()
        const gridReady3 = (params: any) => {
            gridOption3.value = params.api
        }

        const formRef = ref<FormInstance>()
        const sideOk = () => {
            formRef.value?.validate().then((err) => {
                if (!err) {
                    formRef.value?.validate().then((err) => {
                        if (!err) {
                            pageData.pageLoading = true;
                            if (pageData.sideTitle === "新增程序类型") {
                                post({
                                    url: "/pdm/ProgramType/insert",
                                    data: [dataForm],
                                }).then((res: any) => {
                                    if (res.code === 200) {
                                        formRef.value?.resetFields();
                                        pageData.showAdd = false;
                                        Message.success({
                                            content: "新增成功",
                                            duration: 5000,
                                        });
                                    } else {
                                        Message.error({
                                            content: res.message,
                                            duration: 5000,
                                        });
                                    }
                                    doRefresh();
                                }).finally(() => {
                                    doRefresh();
                                    pageData.pageLoading = false
                                })
                            } else {
                                post({
                                    url: "/pdm/ProgramType/update",
                                    data: [dataForm],
                                }).then((res: any) => {
                                    if (res.code === 200) {
                                        formRef.value?.resetFields();
                                        pageData.showAdd = false;
                                        Message.success({
                                            content: "修改成功",
                                            duration: 5000,
                                        });
                                    } else {
                                        Message.error({
                                            content: res.message,
                                            duration: 5000,
                                        });
                                    }
                                    //doRefresh();
                                }).finally(() => {
                                    doRefresh();
                                    pageData.pageLoading = false
                                })
                            }
                        }
                    });
                }
            })
        }
        const deleteHandler = () => {
            if (gridOption.value.getSelectedRows().length === 0) {
                Message.error('请先勾选')
                return
            }
            Modal.confirm({
                title: '系统提示',
                content: '确认删除选中的数据?',
                onOk() {
                    pageData.pageLoading = true;
                    post({
                        url: '/pdm/ProgramType/delete',
                        data: gridOption.value.getSelectedRows().map((o: any) => { return o.id })
                    }).then(({ code, data }: any) => {
                        if (code === 200) {
                            Message.success({
                                content: '删除成功',
                                duration: 5000
                            })
                            pagination.page = 1
                            doRefresh()
                        } else {
                            Message.error({
                                content: '修改失败',
                                duration: 5000
                            })
                        }
                    }).finally(() => {
                        pageData.pageLoading = false
                    });
                }
            })
        }
        const editHandler = (record: BrandInfo) => {
            //循环对象 赋值
            for (let key in record) {
                dataForm[key] = record[key]
            }
            pageData.sideTitle = '修改程序类型'
            pageData.showAdd = true
        }
        //判断是否填写了中文
        const isChiese = (value: string, cb: Function) => {
            return new Promise<void>(resolve => {
                if (window.encodeURI(value).indexOf('%') !== -1) {
                    cb('填写的值只能是英文数字组合或英文，数字！')
                }
                resolve()
            })
        }
        //input离开焦点 将小写转大写
        const inputBlur = () => {
            dataForm.programType = dataForm.programType.toUpperCase();
        }
        //导出
        const exports = () => {
            if (gridOption.value.getSelectedRows().length === 0) {
                Message.error('请先勾选');
                return
            } else {
                let idList: any = []
                gridOption.value.getSelectedRows().forEach(function (o: any) {
                    idList.push(o['id'])
                })
                //将表头拼接出来
                let head = "<th>序号</th><th>程序类型</th><th>备注</th><th>创建人</th><th>创建时间</th><th>最后修改人</th><th>最后修改时间</th>"
                //拿到当前表格数据与勾选的行做筛选

                let nowRow = table.dataList.filter(function (o) {
                    return (gridOption.value.getSelectedRows().map((o: any) => { return o.id })).indexOf(o["id"]) !== -1;
                })
                let body = "";
                nowRow.forEach(function (o) {
                    body += "<tr><td>" + o["id"] + "</td>";
                    body += "<td>" + o["programType"] + "</td>";
                    body += "<td>" + o["remark"] + "</td>";
                    body += "<td>" + o["createName"] + "</td>";
                    body += "<td>" + o["createTime"] + "</td>";
                    body += "<td>" + o["updateName"] + "</td>";
                    body += "<td>" + o["updateTime"] + "</td>";
                    body += "</tr>";
                })
                tableToXlsx(head, '程序类型', body)
                console.log(table)
            }
        }

        function tableToXlsx(head: any, filename: any, body: any) {
            const uri = 'data:application/vnd.ms-excel;base64,',
                template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1"><tr>${head}</tr>${body}</table></body>
        </html>`;

            const a = document.createElement('a');
            a.href = uri + window.btoa(unescape(encodeURIComponent(template)));
            a.download = filename;
            a.click();
            document.removeChild(a);
        }

        //模板下载
        const downloadHandler = () => {
            axios.get(baseURL + '/pdm/ProgramType/uploadModel', {
                responseType: 'blob',
                headers: {
                    token: sessionStorage.getItem('USER-TOKEN-KEY')
                }
            }).then((res) => {
                if (res.status === 200) {
                    filedownload(res.data, '程序类型.xlsx')
                }
            })
        }
        //导入
        const importHandler = () => {

            const inputEle: HTMLInputElement = document.createElement('input')
            inputEle.type = 'file'
            inputEle.id = 'fileUploadExcel'
            inputEle.accept = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
            inputEle.addEventListener('change', (e) => {
                const formData = new FormData()
                if (inputEle.files !== null) {
                    formData.append('file', inputEle.files[0] || '')
                } else {
                    Message.warning('未选择文件！');
                    return
                }
                pageData.pageLoading = true
                axios.post(baseURL + '/pdm/ProgramType/importModelData', formData, {
                    headers: {
                        "Content-Type": 'multipart/form-data',
                        "token": sessionStorage.getItem('USER-TOKEN-KEY')
                    },
                }).then((result) => {
                    if (result.data['code'] === 200) {
                        Message.success('导入成功')
                    } else {
                        Message.error(result.data.message)
                    }

                }).finally(() => {
                    pageData.pageLoading = false
                    doRefresh()
                })
            })
            inputEle.click()
        }
        //下拉框   性质
        const focusSel = () => {
            selCxAll({ property: "" });
        }
        const options = ref<any>(pageData.xzList);
        const loading = ref(false);
        const handleSearch = (value: any) => {
            if (value) {
                const ob = { property: value, deleteState: 0 }
                loading.value = true;
                selCxAll(ob);
                options.value = pageData.xzList;
                loading.value = false;
            } else {
                options.value = []
            }
        };
        function selCxAll(val: any) {
            post({
                url: "/pdm/formulaAttribute/getFieldValue",
                data: val
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    console.log(data);
                    let dataList: any = [];
                    data.forEach(function (o: any) {
                        dataList.push(o["property"])
                    });
                    pageData.xzList = dataList;
                } else {
                    Message.error({
                        content: "查询失败！",
                        duration: 5000,
                    });
                }
            });
        }

        //下拉框  作业类型
        const focusSel1 = () => {
            selCxAll1({ "jobType": "" });
        }
        const options1 = ref<any>(pageData.zyList);
        const loading1 = ref(false);
        const handleSearch1 = (value: any) => {
            if (value) {
                const ob = { jobType: value, deleteState: 0 }
                loading1.value = true;
                selCxAll1(ob);
                options1.value = pageData.zyList;
                loading1.value = false;
            } else {
                options1.value = []
            }
        };
        function selCxAll1(val: any) {
            post({
                url: "/pdm/JobType/getFieldValue",
                data: val
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    let dataList: any = [];
                    data.forEach(function (o: any) {
                        dataList.push(o["jobType"])
                    });
                    pageData.zyList = dataList;
                } else {
                    Message.error({
                        content: "查询失败！",
                        duration: 6000,
                    });
                }
            });
        }


        //下拉框  流程卡号
        const focusSel2 = () => {
            selCxAll2({ "flowCardCode": "", deleteState: 0 });
        }
        const options2 = ref<any>(pageData.cardList);
        const loading2 = ref(false);
        const handleSearch2 = (value: any) => {
            if (value) {
                const ob = { flowCardCode: value, deleteState: 0 }
                loading2.value = true;
                selCxAll2(ob);
                options2.value = pageData.cardList;
                loading2.value = false;
            } else {
                options2.value = []
            }
        };
        function selCxAll2(val: any) {
            post({
                url: "aps/circulatCard/getDropValue",
                data: val
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    pageData.cardList = data;
                } else {
                }
            });
        }

        //根据流转卡号带出布号和重量
        const cardChange = () => {
            dataForm.colorCode = ""
            dataForm.customName = ""
            post({
                url: 'aps/circulatCard/getList',
                data: {
                    flowCardCode: dataForm.flowCardCode
                }
            }).then((res: any) => {
                if (res.code == 200) {
                    dataForm.colorCode = res.data[0].colorCode
                    dataForm.customName = res.data[0].customName
                }
            })
        }
        //流转卡号带出
        const ccFocus = () => {
            if (dataForm.flowCardCode != '') {
                post({
                    url: "/pdm/controlMachine/getList",
                    data: {
                        "flowCardCode": dataForm.flowCardCode,
                    }
                })
                    .then(({ data, code }: any) => {
                        if (code === 200) {
                            pageData.ccList = data
                        }
                    })
            }
        }
        const ccClick = () => {
            if (dataForm.flowCardCode == "") {
                Message.warning('请先选择流转卡号！')
            }
        }


        //下拉框 对色师傅 
        const focusSel3 = () => {
            selCxAll3({ "empName": "", deleteState: 0 });
        }
        const options3 = ref<any>(pageData.ygList);
        const loading3 = ref(false);
        const handleSearch3 = (value: any) => {
            if (value) {
                const ob = { empName: value, deleteState: 0 }
                loading3.value = true;
                selCxAll3(ob);
                options3.value = pageData.ygList;
                loading3.value = false;
            } else {
                options3.value = []
            }
        };
        function selCxAll3(val: any) {
            post({
                url: "/org/employee/getFieldValue",
                data: val
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    pageData.ygList = data;
                } else {
                }
            });
        }
        // //设置权限
        // // ['查询', '新增', '删除', '导出', '导入']
        // const permissionStore = usePermission()

        // if (permissionStore.hasPermisson('ppzl.cx')) {

        //     pageData.btnList.push("查询")
        // }
        // if (permissionStore.hasPermisson('ppzl.xz')) {
        //     pageData.btnList.push("新增")
        // }
        // if (permissionStore.hasPermisson('ppzl.sc')) {
        //     pageData.btnList.push("删除")
        // }
        // if (permissionStore.hasPermisson('ppzl.dc')) {
        //     pageData.btnList.push("导出")
        // }
        // if (permissionStore.hasPermisson('ppzl.dr')) {
        //     pageData.btnList.push("导入")
        // }
        // if (permissionStore.hasPermisson('ppzl.xg')) {
        //     pageData.isEdit = true
        // }
        // console.log(permissionStore.hasPermisson('ppzl.cx'));
        const handleChange = (_data: any) => {
            table.handleSuccess(_data);
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            width:150
        }
        const noClick = () => {

        }

        let visible = ref(false)
        const print = () => {
            printJS({
                printable: 'request',
                type: 'html',
                targetStyles: ['*'],
            })
        }
        //取消打印
        const canNo = () => {
            visible.value = false
        }
        return {
            print,
            visible,
            canNo,
            noClick,
            doRefresh2,
            handoff,
            options3,
            loading3,
            handleSearch3,
            focusSel3,
            ccFocus,
            ccClick,
            cardChange,
            options2,
            loading2,
            handleSearch2,
            focusSel2,
            editHandler,
            deleteHandler,
            sideOk,
            formRef,
            dataForm,
            addHandler,
            selectedRowKeys,
            pagination,
            tableColumns1,
            tableColumns2,
            tableColumns3,
            table,
            rowKey,
            pageData,
            queryData,
            selectHandler,
            isChiese,
            inputBlur,
            exports,
            options,
            loading,
            handleSearch,
            focusSel,
            downloadHandler,
            importHandler,
            options1,
            loading1,
            handleSearch1,
            focusSel1,
            headerShow,
            handleChange,
            PageSize,
            change1,
            defaultColDef,
            tc,
            tc2,
            tc3,
            gridOption,
            gridOption2,
            gridOption3,
            gridReady,
            gridReady2,
            gridReady3,
            total,
            page,
            size,
        };
    },
    components: { Toolbar, PageTabelLayout,  }
}
</script>
<style scoped lang="less">
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>